<template>
	<view>
		<!-- fixed -->
		<view class="my-navbar" @touchmove.prevent>
			<status-bar :color="statusbar('style').backgroundColor"></status-bar>
			<view class="my-navbar-navbar" :style="{
					height: navbar('style').height,
					backgroundColor: navbar('style').backgroundColor
				}">
				<slot name="navbar">
					<view class="navbar">
						<view class="navbar-areas">
							<view class="area-item left" @click="on('clickLeft', $event)">
								<slot name="left">
									<image v-if="backIcon" class="left-icon" :src="backIcon" mode="scaleToFill"></image>
								</slot>
							</view>
							<view class="area-item center" @click="on('clickCenter', $event)">
								<slot name="center">
									<text v-if="title" class="center-text">{{ title }}</text>
								</slot>
							</view>
							<view class="area-item right" @click="on('clickRight', $event)">
								<slot name="right">
									<text v-if="rightText" class="right-text">{{ rightText }}</text>
								</slot>
							</view>
						</view>
						<view v-if="border" class="navbar-line"></view>
					</view>
				</slot>
			</view>
		</view>
		<!-- static -->
		<status-bar></status-bar>
		<view :style="{ height: navbar('style').height }"></view>
	</view>
</template>

<script>
	import StatusBar from '@/components/status-bar';
	import {
		mapState
	} from 'vuex'

	function ifObject(data) {
		return typeof data === 'object' && !Array.isArray(data) && data !== null;
	}

	function ifNumberstring(data) {
		return !isNaN(Number(data));
	}
	export default {
		name: 'my-navbar',
		data() {
			return {};
		},
		props: {
			fns: {
				type: Array,
				default: () => {
					return [];
				}
			},
			// 导航栏高度（单位：rpx）
			height: {
				type: Number,
				default: 98
			},
			// 标题
			title: {
				type: String,
				default: ''
			},
			// 页面返回键（为空时不激活 clickLeft 方法的内置逻辑）
			backIcon: {
				default: '/static/img/icon_back.png'
			},
			// 右测文字
			rightText: {
				type: String,
				default: ''
			},
			border: {
				type: Boolean,
				default: true
			},
			backgroundColor: {
				type: String,
				default: '#ffffff'
			}
		},
		computed: {
			...mapState({
				loginSuccessUserInfo: state => state.User.userInfo, //用户数据
			}),
			statusbar() {
				const eName = 'statusbar';
				return tag => {
					switch (tag) {
						case 'style':
							return {
								backgroundColor: this.backgroundColor
							};
					}
				};
			},
			navbar() {
				const eName = 'navbar';
				return tag => {
					switch (tag) {
						case 'height':
							return this.height;
						case 'style':
							return {
								height: this[eName]('height') + 'rpx',
									backgroundColor: this.backgroundColor
							};
					}
				};
			},
			isCurrentPages() {
				return getCurrentPages().length > 1
			}
		},
		methods: {
			on(fn, e, payload) {
				if (!this.fns.find(i => i === fn)) {
					// 触发内置方法
					if (typeof this[fn] === 'function') this[fn](e, payload);
				}
				// 触发回调方法
				this.$emit('handle', fn, e, payload);
			},
			clickLeft(fn, e, p) {
				if (this.backIcon && this.isCurrentPages) return uni.navigateBack();
				/* uni.reLaunch({
					url: '/pages/index/index'
				}); */
			}
		},
		components: {
			StatusBar
		}
	};
</script>

<style scoped>
	.my-navbar {
		z-index: 999;
		position: fixed;
		left: 0;
		right: 0;
	}

	.my-navbar-navbar {
		position: relative;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		background-color: #ffffff;
	}

	.navbar {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;

		display: flex;
		flex-direction: column;
	}

	.navbar-areas {
		flex: 1;

		display: flex;
		flex-direction: row;

		padding: 0 30rpx;
	}

	.area-item {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;

		/* #ifndef APP-NVUE */
		white-space: nowrap;
		/* #endif */
		overflow: hidden;
	}

	.area-item.left {
		justify-content: flex-start;
	}

	.left-icon {
		width: 18rpx;
		height: 32rpx;
	}

	.left-home-icon {
		width: 40rpx;
		height: 42rpx;
	}

	.area-item.center {
		justify-content: center;
	}

	.center-text {
		font-size: 36rpx;
		font-weight: 500;
		color: #222222;
	}

	.area-item.right {
		justify-content: flex-end;
	}

	.right-text {
		font-size: 28rpx;
		color: #999999;
	}

	.navbar-line {
		height: 2rpx;
		background-color: #e3e4e6;
	}
</style>
